<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebSocket Echo Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <script>
    var ws = new WebSocket("ws://www.suzwgt.com:2000");
    var flag;
    ws.onopen = function (e) {
        console.log('Connection to server opened');
    }
    function sendMessage() {
        if (!$('#message').val()) return;
        if ($('#message').val()) {
        ws.send(JSON.stringify({"user":flag,"msg":$('#message').val()}));

        }
        $('#message').val("");
    }
    ws.onclose = function (evt) {
        console.log("WebSocketClosed!");  
        console.log(evt); 
    }
    ws.onmessage = function (e) {
        console.log(e.data);
    	var message = JSON.parse(e.data);
    	if (message.flag ){
    		flag = message.flag;
    		$(".scrollarea").after('<p>您是第'+message.flag+"个用户！</p>");
    	}else{
            var co = message.type * 374698;
            var str = '<div class="color" style="background:#'+co.toString(16).split(0,6)+'">';
    		if (message.type == 0) {
                str += '<p style="text-align:right;color:red">我：</p>'
                    +'<p style="text-align:right;">'+message.msg+'</p>';
    		}else{
                str += '<p style="text-align:left;color:red">第'+message.type+'个用户：</p>'
                    +'<p style="text-align:left;">'+message.msg+'</p>';
    		}
            str += '</div>';
            $(".scrollarea").append(str);
    	}
        $(".contentarea").scrollTop($(".scrollarea").height());
    }
    </script>
    <style>
        .contentarea{
            position: fixed;
            top: 20px;
            bottom: 100px;
            overflow-y: scroll;
            padding: 20px;
            -webkit-overflow-scrolling:touch;
            width:1000px;
            max-width:80%;
        }
        .color{
            padding : 10px 20px;
            opacity : 0.8;
        }
        #chat_form{
            position: fixed;
            bottom: 0px;
            width:1000px;
            max-width:80%;
        }
    </style>
</head>

<body >
    <div class="vertical-center">
        <div class="container">
            <p>&nbsp;</p>
            <div class="contentarea">
                <div class="scrollarea"></div>
            </div>
            <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
                <div class="form-group">
                    <input class="form-control" type="text" name="message" id="message"
                           placeholder="Type text to echo in here" value="" />
                </div>
                <button type="button" id="send" class="btn btn-primary"
                        onclick="sendMessage();">
                    Send!
                </button>
            </form>
        </div>
    </div>
</body>
</html>